<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑试题</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>编辑试题</h2>
            <a href="/teacher/question/manage" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> 返回列表
            </a>
        </div>
        
        <div class="card">
            <div class="card-body">
                <form id="editQuestionForm">
                    <input type="hidden" id="questionId" name="questionId" th:value="${question.questionId}">
                    
                    <div class="mb-3">
                        <label for="courseId" class="form-label">所属课程</label>
                        <select class="form-select" id="courseId" name="courseId" required>
                            <option value="">请选择课程</option>
                            <option th:each="course : ${courses}" 
                                    th:value="${course.courseId}" 
                                    th:text="${course.courseName}"
                                    th:selected="${course.courseId == question.courseId}">课程名称</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="type" class="form-label">题目类型</label>
                        <select class="form-select" id="type" name="type" required>
                            <option value="">请选择题目类型</option>
                            <option value="choice" th:selected="${question.type == 'choice'}">单选题</option>
                            <option value="multiple" th:selected="${question.type == 'multiple'}">多选题</option>
                            <option value="judge" th:selected="${question.type == 'judge'}">判断题</option>
                            <option value="essay" th:selected="${question.type == 'essay'}">简答题</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="content" class="form-label">题目内容</label>
                        <textarea class="form-control" id="content" name="content" rows="3" required th:text="${question.content}"></textarea>
                    </div>
                    
                    <div class="mb-3" id="optionsContainer">
                        <label class="form-label">选项</label>
                        <div id="optionsList">
                            <div class="input-group mb-2">
                                <span class="input-group-text">A</span>
                                <input type="text" class="form-control" name="options" required th:value="${#lists.size(#strings.arraySplit(optionsStr, '|')) > 0 ? #strings.arraySplit(optionsStr, '|')[0] : ''}">
                            </div>
                            <div class="input-group mb-2">
                                <span class="input-group-text">B</span>
                                <input type="text" class="form-control" name="options" required th:value="${#lists.size(#strings.arraySplit(optionsStr, '|')) > 1 ? #strings.arraySplit(optionsStr, '|')[1] : ''}">
                            </div>
                            <div class="input-group mb-2">
                                <span class="input-group-text">C</span>
                                <input type="text" class="form-control" name="options" required th:value="${#lists.size(#strings.arraySplit(optionsStr, '|')) > 2 ? #strings.arraySplit(optionsStr, '|')[2] : ''}">
                            </div>
                            <div class="input-group mb-2">
                                <span class="input-group-text">D</span>
                                <input type="text" class="form-control" name="options" required th:value="${#lists.size(#strings.arraySplit(optionsStr, '|')) > 3 ? #strings.arraySplit(optionsStr, '|')[3] : ''}">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="answer" class="form-label">答案</label>
                        <input type="text" class="form-control" id="answer" name="answer" required th:value="${question.answer}">
                        <div class="form-text">单选题填写选项字母（如：A），多选题填写多个选项字母（如：ABC），判断题填写"正确"或"错误"</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="score" class="form-label">分值</label>
                        <input type="number" class="form-control" id="score" name="score" min="1" max="100" required th:value="${question.score}">
                    </div>
                    
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-save"></i> 保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="/js/bootstrap.bundle.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <script>
        document.getElementById('type').addEventListener('change', function() {
            const optionsContainer = document.getElementById('optionsContainer');
            const type = this.value;
            if (type === 'essay' || type === 'judge') {
                optionsContainer.style.display = 'none';
            } else {
                optionsContainer.style.display = 'block';
            }
        });
        
        // 页面加载时根据当前题目类型显示/隐藏选项
        window.addEventListener('load', function() {
            const type = document.getElementById('type').value;
            const optionsContainer = document.getElementById('optionsContainer');
            
            if (type === 'essay' || type === 'judge') {
                optionsContainer.style.display = 'none';
            } else {
                optionsContainer.style.display = 'block';
            }
        });
        
        document.getElementById('editQuestionForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = {
                questionId: document.getElementById('questionId').value,
                courseId: document.getElementById('courseId').value,
                type: document.getElementById('type').value,
                content: document.getElementById('content').value,
                options: Array.from(document.getElementsByName('options')).map(input => input.value).join('|'),
                answer: document.getElementById('answer').value,
                score: document.getElementById('score').value
            };
            
            axios.post('/teacher/question/edit', formData)
                .then(response => {
                    if (response.data === 'success') {
                        alert('修改成功');
                        window.location.href = '/teacher/question/manage';
                    } else {
                        alert(response.data);
                    }
                })
                .catch(error => {
                    alert('修改失败：' + error.message);
                });
        });
    </script>
</body>
</html> 